<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html lang="en">
<head>
    <base href="<%=basePath%>">
    <!-- jsp文件头和头部 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta charset="utf-8" />
    <title></title>
    <meta name="description" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
    <!-- bootstrap & fontawesome -->
    <link rel="stylesheet" href="<%=basePath%>/public/js/ace/css/bootstrap.css" />
    <link rel="stylesheet" href="<%=basePath%>/public/js/ace/css/font-awesome.css" />
    <!-- page specific plugin styles -->
    <!-- text fonts -->
    <link rel="stylesheet" href="<%=basePath%>/public/js/ace/css/ace-fonts.css" />
    <!-- ace styles -->
    <link rel="stylesheet" href="<%=basePath%>/public/js/ace/css/ace.css" class="ace-main-stylesheet" id="main-ace-style" />
    <!--[if lte IE 9]>
    <link rel="stylesheet" href="/public/js/ace/css/ace-part2.css" class="ace-main-stylesheet" />
    <![endif]-->
    <!--[if lte IE 9]>
    <link rel="stylesheet" href="/public/js/ace/css/ace-ie.css" />
    <![endif]-->
    <!-- inline styles related to this page -->
    <!-- ace settings handler -->
    <script src="<%=basePath%>/public/js/ace/js/ace-extra.js"></script>
    <script src="<%=basePath%>/public/js/jquery-3.2.1.min.js"></script>
    <!-- HTML5shiv and Respond.js for IE8 to support HTML5 elements and media queries -->
    <!--[if lte IE 8] -->
    <script src="<%=basePath%>/public/js/ace/js/html5shiv.js"></script>
    <script src="<%=basePath%>/public/js/ace/js/respond.js"></script>
    <script type="text/javascript" src="<%=basePath%>/public/plugins/layer/layer.js"></script>
    <!-- 日期框 (带小时分钟)-->
    <link rel="stylesheet" href="<%=basePath%>public/js/ace/css/bootstrap-datetimepicker.css" />
</head>
<body class="no-skin">
<!-- /section:basics/navbar.layout -->
<div class="main-container" id="main-container">
    <!-- /section:basics/sidebar -->
    <div class="main-content">
        <div class="main-content-inner">
            <div class="page-content">
                <div class="row">
                    <div class="col-xs-12">
                        <div class="span6">
                            <div class="tabbable">
                                <ul class="nav nav-tabs" id="myTab" style="margin-top: 10px;">
                                    <li class="active"><a data-toggle="tab" href="#profile"><i class="green icon-cog bigger-110"></i>审批过程</a></li>
                                    <li><a data-toggle="tab" href="#png"><i class="green icon-cog bigger-110"></i>流程图</a></li>
                                </ul>
                                <div class="tab-content">
                                    <div id="profile" class="tab-pane in active">
                                        <table id="audit_process" class="table table-striped table-bordered table-hover" style="margin-top: 10px;">
                                            <th class="center" colspan="10">审批过程</th>
                                            <tr>
                                                <th class="center" style="width:50px;">步骤</th>
                                                <th class="center" style="width:150px;">任务节点</th>
                                                <th class="center" style="width:150px;">办理人</th>
                                                <th class="center" style="width:150px;"><i class="ace-icon fa fa-clock-o bigger-110 hidden-480"></i>审批开始时间</th>
                                                <th class="center" style="width:150px;"><i class="ace-icon fa fa-clock-o bigger-110 hidden-480"></i>审批结束时间</th>
                                                <th class="center" style="width:120px;">用时</th>
                                                <th class="center">审批意见</th>
                                            </tr>
                                            <c:forEach items="${historyActivitiLists}" var="history" varStatus="vs">
                                                <tr>
                                                    <td class='center' style="width: 30px;">${vs.index+1}</td>
                                                    <td class='center' style="padding-top: 10px;">${history.activityName}</td>
                                                    <td class='center' style="padding-top: 10px;">
                                                        <c:if test="${fn:length(history.assignee)>8 }">
                                                                ${fn:substring(history.assignee, 0,8)}...<a onclick="details('${history.assignee }')" style="cursor:pointer;" title="详情"><i id="nav-search-icon" class="ace-icon fa fa-search bigger-110 nav-search-icon blue"></i>
                                                        </c:if>
                                                        <c:if test="${fn:length(history.assignee)<=8 }">
                                                            ${history.assignee }
                                                        </c:if>
                                                    </td>
                                                    <td class='center' style="padding-top: 10px;">
                                                        <fmt:formatDate value="${history.startTime}" pattern="yyyy-MM-dd HH:mm:ss"/>
                                                    </td>
                                                    <td class='center' style="padding-top: 10px;">
                                                        <c:if test="${history.endTime == null}">正在审批……</c:if>
                                                        <c:if test="${history.endTime != null}">
                                                            <fmt:formatDate value="${history.endTime}" pattern="yyyy-MM-dd HH:mm:ss"/>
                                                        </c:if>
                                                    </td>
                                                    <td class='center'>${history.useTime}</td>
                                                    <td style="padding-top: 10px;" class="center">
                                                        <c:if test="${fn:length(history.message)>10 }">
                                                            ${fn:substring(history.message, 0, 10)}...<a onclick="details('${history.message }')" style="cursor:pointer;" title="详情"><i id="nav-search-icon" class="ace-icon fa fa-search bigger-110 nav-search-icon blue"></i>
                                                        </c:if>
                                                        <c:if test="${fn:length(history.message)<=10 }">
                                                            ${history.message }
                                                        </c:if>
                                                    </td>
                                                </tr>
                                            </c:forEach>
                                        </table>
                                    </div>
                                    <div id="png" class="tab-pane">
                                        <table id="histroypng" class="table table-striped table-bordered table-hover" style="margin-top: 10px;">
                                            <th colspan="10" class='center'>流程图</th>
                                            <tr>
                                                <td class='center'><img alt="正在加载......" src="${imgSrc }"></td>
                                            </tr>
                                            <tr>
                                                <td class='center'><p class="text-warning bigger-110 orange" style="padding-top: 5px;">如果图片显示不全,点击最大化按钮</p></td>
                                            </tr>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--[if !IE]> -->
<script type="text/javascript">
    window.jQuery || document.write("<script src='<%=basePath%>public/js/ace/js/jquery.js'>"+"<"+"/script>");
</script>
<!-- <![endif]-->
<!--[if IE]>
<script type="text/javascript">
    window.jQuery || document.write("<script src='<%=basePath%>public/js/ace/js/jquery1x.js'>"+"<"+"/script>");
</script>
<![endif]-->
<script type="text/javascript">
    if('ontouchstart' in document.documentElement) document.write("<script src='<%=basePath%>public/js/ace/js/jquery.mobile.custom.js'>"+"<"+"/script>");
</script>
<script src="<%=basePath%>/public/js/ace/js/bootstrap.js"></script>
<!-- 日期框(带小时分钟) -->
<script src="<%=basePath%>/public/js/ace/js/date-time/moment.js"></script>
<script src="<%=basePath%>/public/js/ace/js/date-time/locales.js"></script>
<script src="<%=basePath%>/public/js/ace/js/date-time/bootstrap-datetimepicker.js"></script>
<!--提示框-->
<script type="text/javascript" src="<%=basePath%>/public/js/jquery.tips.js"></script>
<script type="text/javascript">
    /**
     * 查看内容详情
     * @param content 内容
     */
    function details(content) {
        layer.open({
            type: 2,
            title: '详细信息',
            shadeClose: true,
            shade: false,
            maxmin: true,
            area: ['760px', '500px'],
            content: '/global/details.jsp?details='+content
        });
    }
</script>
</body>
</html>